<template>
  <Header></Header>
  <div id="content-box">
    <!-- 侧栏 -->
    <div id="sider">
      <div :class="refreshFlag ? '' : 'not-show'">
        <div id="title">
          <h2>搜&nbsp;&nbsp;&nbsp;索</h2>
        </div>

        <div class="form-box">
          <div class="text-box">
            <span>出发地</span>
          </div>
          <div class="input-box">
            <!-- <a-input
              :bordered="false"
              v-model:value="startPlace"
              placeholder="出发地"
            /> -->
            <a-cascader
              :options="options"
              placeholder="出发地"
              :showSearch="filter"
              v-model:value="startPlace"
              style="
                width: 300px;
                box-shadow: rgba(34, 34, 34, 0.07) 0px 4px 5px;
              "
            />
          </div>
        </div>

        <div class="form-box">
          <div class="text-box">
            <span>目的地</span>
          </div>
          <div class="input-box">
            <!-- <a-input
              :bordered="false"
              v-model:value="arrivalPlace"
              placeholder="目的地"
            /> -->
            <a-cascader
              :options="options"
              placeholder="目的地"
              :showSearch="filter"
              v-model:value="arrivalPlace"
              style="
                width: 300px;
                box-shadow: rgba(34, 34, 34, 0.07) 0px 4px 5px;
              "
            />
          </div>
        </div>

        <div class="form-box">
          <div class="text-box">
            <span>起飞时间</span>
          </div>
          <div class="input-box">
            <a-date-picker
              :locale="locale"
              placeholder="起飞时间"
              v-model:value="time"
              :disabledDate="disabledDate"
            />
          </div>
        </div>

        <div class="input-box">
          <a-button
            type="primary"
            @click="queryFlight"
            class="query-btn"
            :loading="submitBtnLoading"
            >查询航班</a-button
          >
        </div>
      </div>
    </div>

    <!-- 主内容 -->
    <div id="main">
        <div v-if="refreshFlag">
          <FlightCard
            v-for="(item, index) in flights"
            :key="index"
            :flightInfo="item"
          ></FlightCard>
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from "../components/Header.vue";
import FlightCard from "../components/FlightCard.vue";
import { ref } from "vue";
import { Dayjs } from "dayjs";
import dayjs from "dayjs";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import { isBlank } from "../utils/StrUtils";
import { message } from "ant-design-vue";
import options from "../assets/cities";
import {
  FlightInfo,
  QueryIdleFlightQueryWrapper,
  queryIdleFlights,
} from "../api/flightApi";
import { HTTP_STATUS } from "../api/request";

const startPlace = ref<string[]>([]);
const arrivalPlace = ref<string[]>([]);
const time = ref<Dayjs>(dayjs());

const submitBtnLoading = ref<boolean>(false);
const refreshFlag = ref<boolean>(false);

const flights = ref<FlightInfo[]>([]);

const filter = (inputValue: any, path: any) => {
  return path.some((option: any) => option.label.indexOf(inputValue) > -1);
};

const disabledDate = (date: Dayjs) => {
  if (date.date() === dayjs().date()) {
    return date.year() < dayjs().year() || date.isAfter(dayjs().add(1, "week"));
  }
  return date.isBefore(dayjs()) || date.isAfter(dayjs().add(2, "week"));
};

const queryFlight = () => {
  let start = startPlace.value[startPlace.value.length - 1];
  let end = arrivalPlace.value[arrivalPlace.value.length - 1];

  if (isBlank(start)) {
    message.error("出发城市不能为空");
    return;


  }
  if (isBlank(end)) {
    message.error("目的地城市不能为空");
    return;
  }
  if (start === end) {
    message.error("出发地和目的地不能相同");
    return;
  }
  if (time.value == null) {
    message.error("起飞时间不能为空");
    return;
  }
  submitBtnLoading.value = true;
  const info: QueryIdleFlightQueryWrapper = {
    deployCity: start,
    destCity: end,
    flightDate: time.value?.format("YYYY-MM-DD"),
  };
  setTimeout(async () => {
    refreshFlag.value = false;
    try {
      const res = await queryIdleFlights(info);
      if (res.status === HTTP_STATUS.SUCCESS) {
        if (res.data.length == 0) {
          message.info("未查询到航班");
        } else {
          flights.value = res.data;
          refreshFlag.value = true;
        }
      }
    } catch (error) {
    } finally {
      submitBtnLoading.value = false;
    }
  });
};

</script>

<style lang="scss" scoped>
@import "../assets/css/variables.scss";

.flexBox {
  display: flex;
  justify-content: center;
  align-items: center;
}

#content-box {
  height: 90%;
  background-color: $grayBackgroundColor;

  /* display: grid;
  grid-template-columns: 3fr 7fr; */
  @extend .flexBox;

  color: #333333;

  #sider {
    // 标题
    height: inherit;
    flex: 3;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    > div {
      height: inherit;
      width: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: transform 0.8s ease;

      &.not-show {
        /* transition: {
          property: translateX(600px);
          duration: 2s;
        }; */

        transform: translateX(600px);
      }
    }

    #title {
      width: inherit;
      @extend .flexBox;
      h2 {
        color: $primaryColor;
        font-weight: bolder;
        user-select: none;
      }
    }

    .form-box {
      width: 500px;
      display: flex;
      flex-wrap: wrap;
      // flex-direction: column;
    }

    .text-box {
      flex-basis: 100%;
      width: inherit;
      text-align: left;
      display: flex;
      justify-content: start;
      margin-bottom: 8px;
      span {
        user-select: none;
        display: inline-block;
        margin-left: 22%;
        font-size: large;
        font-weight: bold;
      }
    }

    .input-box {
      width: inherit;
      height: $inputHeight;
      display: flex;
      justify-content: center;
      margin-bottom: 18px;
      :deep(.ant-picker) {
        height: $inputHeight;
        width: $inputWidth;
        box-shadow: $shadow;
        &:hover {
          border: none;
        }
      }

      //提交按钮样式
      :deep(.query-btn) {
        display: inline-block;
        margin-top: 27px;
        width: $inputWidth;
        height: 35px;
        box-shadow: $shadow;
      }

      // 修改级联选择框样式
      :deep(.ant-select-selector) {
        height: $inputHeight;
        .ant-select-selection-item,
        .ant-select-selection-placeholder {
          line-height: $inputHeight;
        }
        .ant-select-selection-search-input {
          height: $inputHeight;
        }
        &:hover {
          border: none;
        }
      }
    }

    div {
      width: inherit;
      @extend .flexBox;
      margin: {
        top: 1px;
      }
    }

    //输入框样式
    div input {
      box-shadow: $shadow;
      // margin-top: 1%;
      // margin-left: 13%;
      width: $inputWidth;
      height: $inputHeight;
      background-color: white;
    }
  }

  #main {
    height: inherit;
    display: inline-block;
    overflow: auto;

    flex: 7;

    margin: {
      top: 3%;
      bottom: 5%;
    }

    > div {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: {
        top: 2%;
        bottom: 2%;
      }
    }
  }
}
</style>
